<template>
  <el-main class="main-container">
    <el-row gutter="20">
        <TheGradeTask v-for="(item,index) in gradetasks" 
        :key="index" :item="item"
        @click="togradeProject(item)"
          class="grading-task"/>
    </el-row>
  </el-main>
</template>
    
<style scoped>
.main-container {
  padding: 20px;
  background-color: #f0f2f5;
}

.grading-task {
  height: 70px;
  padding: 7px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.grading-task:hover {
  transform: translateY(-5px);
}
</style>
  
  <script setup>
  import TheGradeTask from '@/components/TheGradeTask.vue';
  import axios from 'axios';
  import { ref , onMounted} from 'vue';
  import { useRouter } from 'vue-router';


  const router = useRouter();
  const gradetasks = ref([]);
  
  axios.get('http://localhost:8080/gradetask/getgradetasks')
  .then((res) => {
      gradetasks.value = res.data;
  })
  .catch((err) => {
      console.log(err)
  })

  const togradeProject = ((item) => {
    router.push({name:'gradeproject',state:item});
  })
  
  
  </script>
  